<template>
  <el-form
    ref="dataForm"
    :model="roadWay"
    label-position="top"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="车道数" prop="roadway.numberOfLanes">
          <el-input v-model="roadWay.roadway.numberOfLanes" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="通行方向" prop="roadway.trafficDirection">
          <el-input v-model="roadWay.roadway.trafficDirection" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="宽度范围" prop="roadway.roadwayWidthRange">
          <el-input v-model="roadWay.roadway.roadwayWidthRange" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="左侧非机动车道范围" prop="roadway.leftNonRoadwayWidthRange">
          <el-input v-model="roadWay.roadway.leftNonRoadwayWidthRange" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="右侧非机动车道范围" prop="roadway.rightNonRoadwayWidthRange">
          <el-input v-model="roadWay.roadway.rightNonRoadwayWidthRange" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="车行道面积" prop="roadway.roadwayArea">
          <el-input v-model="roadWay.roadway.roadwayArea" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="公交车专用道" prop="roadway.busLane">
          <el-select v-model="roadWay.roadway.busLane" placeholder="请选择" required>
            <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="基层类型" prop="typeAndLengths[0].type">
          <el-input v-model="roadWay.typeAndLengths[0].type" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="基层长度" prop="typeAndLengths[0].length">
          <el-input v-model="roadWay.typeAndLengths[0].length" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="路面类型" prop="typeAndLengths[1].type">
          <el-input v-model="roadWay.typeAndLengths[1].type" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="路面长度" prop="typeAndLengths[1].length">
          <el-input v-model="roadWay.typeAndLengths[1].length" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="侧石类型" prop="typeAndThicknesses[0].type">
          <el-input v-model="roadWay.typeAndThicknesses[0].type" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="侧石厚度" prop="typeAndThicknesses[0].thickness">
          <el-input v-model="roadWay.typeAndThicknesses[0].thickness" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :rules="rules" label="平石类型" prop="typeAndThicknesses[1].type">
          <el-input v-model="roadWay.typeAndThicknesses[1].type" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :rules="rules" label="平石厚度" prop="typeAndThicknesses[1].thickness">
          <el-input v-model="roadWay.typeAndThicknesses[1].thickness" />
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
export default {
  name: 'RoadManageWay',
  props: { roadWay: {
    type: Object,
    default() {
      return {}
    }
  }},
  data() {
    return {
      rules: {
        required: true, message: '请输入信息'
      },
      typeOption: [{
        value: 0,
        label: '无'
      }, {
        value: 1,
        label: '有'
      }]
    }
  }
}
</script>

